<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    新增角色
  </ng-template>

  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm" *ngIf="active">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="roleName" nzRequired>
          <span>
            角色名称
            <i nz-icon nz-tooltip nzTitle="请输入角色名称" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="roleName" formControlName="roleName" [(ngModel)]="role.roleName">
          <nz-form-explain *ngIf="validateForm.get('roleName').dirty && validateForm.get('roleName').errors">请输入角色名称!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="description" nzRequired>
          <span>
            备注
            <i nz-icon nz-tooltip nzTitle="请输入备注" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="description" formControlName="description" [(ngModel)]="role.description">
          <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').errors">请输入备注!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

    </form>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button type="submit" [nzType]="'primary'" (click)="handleSave()" [nzLoading]="isConfirmLoading">保存</button>
  </ng-template>
</nz-modal>
